// 以.tsx结尾的文件会用到ts,以及jsx语法
// 以.ts结尾的文件会用到ts语法
// react是可以帮助程序员构建用户界面的JAVASCRIPT
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
// 1- 指定挂载的位置
const root = ReactDOM.createRoot(document.querySelector("#root") as Element);

// 2:指定挂载的内容:
// 2-1:在当前文件中创建函数组件
// function App (){
//     return (
//         <div>App</div>
//     )
// }

// 2-2:将函数组件赋值给常量
// const App = ()=> (
//     <div>App2</div>
// )

// 2-3:属性的类型  typescript--->anyscript
// function App(props:any){
//     return (
//         <div>
//             <p>userName:{props.userName}</p>
//             <p>age:{props.age}</p>
//         </div>
//     )
// }

// 2-4:指定类型->interface
// interface IProps {
//     userName:string,
//     age:number
// }
// function App(props:IProps){
//     return (
//         <div>
//             <p>userName:{props.userName}</p>
//             <p>age:{props.age}</p>
//         </div>
//     )
// }

// 2-5:指定类型->type
// const userName:string = "zhangsan";
// const info:string | number = "12";
// const a:string | number = 12;
// type TOne  = string | number;
// const b:TOne = "A";
// const c:TOne = 12;

// interface IPerson {
//     userName:string
// }
// interface IBox extends IPerson{
//     age:number
// }
// const a:IBox = {
//     age:12,
//     userName:"zhangSan"
// }

// type TPerson = {
//     age:number
// }
// type TBox = {
//     userName:string
// } & TPerson;
// const a :TBox = {
//     userName:"lisi",
//     age:12
// }

// interface IOne  {
//     userName:string
// }
// interface IOne {
//     age:number
// }
// const a : IOne = {
//     userName:"zhangsan",
//     age:12
// }


// type TProps = {
//     userName:string,
//     age:number
// }
// function App(props:TProps){
//     return (
//         <div>
//             <p>userName:{props.userName}</p>
//             <p>age:{props.age}</p>
//         </div>
//     )
// }


// 2-6:约束类型1
// type TProps = {
//     userName:string,
//     age:number
// }
// const App:React.FC<TProps> = props => (
//     <div>
//         <p>userName:{props.userName}</p>
//         <p>age:{props.age}</p>
//     </div>
// )

// 2-7 约束 类型
// const App:React.FC<{userName:string,age:number}> = props => (
//     <div>
//         <p>userName:{props.userName}</p>
//         <p>age:{props.age}</p>
//     </div>
// )

// 2-8 将组件定义在外部


// 3- 将App呈现到界面中
root.render(<App userName={"lisi"} age={12}/>);
